<div class="tab-name">
    <h3>{{page | titlecase}}</h3>
</div>
<app-loading-circle *ngIf='isLoading'></app-loading-circle>
<div #content 
class="profile-body mat-elevation-z8"
[hidden]='isLoading'>

    <div class="profile-card" [style.background-color]="profileColor + 22">
        <img *ngIf="userProfile?.avatar !== ''; else noAvatar" 
        [src]="userProfile?.avatar" alt="" 
        (onError)="userProfile.avatar = ''" 
        class="profile-icon">

        <ng-template #noAvatar>
            <div [style.background-color]="profileColor" class="profile-icon">
                {{userProfile?.displayname[0]}}
            </div>
        </ng-template>
        <span class="profile-name">
            {{userProfile?.displayname}} 
        </span>
        <span class="profile-username" *ngIf='isExternal'>
            {{userProfile?.username}}
        </span> 
        <span class="profile-username" *ngIf='isExternal'>
            Group: {{userProfile?.group}}
        </span>
        <span *ngIf="email.value">
            {{email.value}}
        </span>
        <span 
        [style.background-color]="profileColor + 22" 
        *ngIf="department.value"
        class="dept-label"
        >
            <strong [style.color]="profileColor"
          
            >
                {{department.value}}
            </strong>
        </span>
    </div>

<!-- if ERROR -->
    <div *ngIf="isErrorResponse" class="alert-error alert-danger">
        <mat-icon>warning</mat-icon>
        {{'notifications.error.invalidJSON' | translate }}
    </div>

    <div *ngIf='!isExternal'>
    <mat-tab-group>
        <mat-tab [label]="'preference.users.dialog.title' | translate:{username: 'User'}">
<div class="user-settings">
    <strong>{{ 'preference.users.dialog.personalInfo' | translate }}</strong>
    <hr />
    <div style="display: grid; grid-template-columns: repeat(4, 24%); width: calc(100% - 10px); grid-gap: 10px;">
        <mat-form-field>
        <mat-label>{{ 'preference.users.dialog.firstName' | translate }}</mat-label>
        <input matInput
            autocomplete="off"
            [formControl]="firstname"
            required />
        <mat-error *ngIf="firstname?.errors?.required">{{'validators.required' | translate }}</mat-error>
        <mat-error *ngIf="firstname?.errors?.minlength">
            {{ firstname?.errors?.minlength?.requiredLength }} Characters
            min
        </mat-error>
        <mat-error *ngIf="firstname?.errors?.maxlength">
            {{ firstname?.errors?.maxlength?.requiredLength }} Characters
            max
        </mat-error>
        <mat-error *ngIf="firstname?.errors?.pattern && !firstname?.errors?.minlength">
            {{'validators.pattern' | translate }} [aA-Zz], [0-9], "-", "_" or "."]
        </mat-error>
        </mat-form-field>

        <mat-form-field>
        <mat-label>{{ 'preference.users.dialog.lastName' | translate }}</mat-label>
        <input matInput
            autocomplete="off"
            [formControl]="lastname"
            />
        <mat-error *ngIf="lastname?.errors?.maxlength">
            {{ lastname?.errors?.maxlength?.requiredLength }} {{'validators.maxChars' | translate }}
        </mat-error>
        <mat-error *ngIf="lastname?.errors?.pattern && !lastname?.errors?.maxlength">
            {{'validators.pattern' | translate }} [aA-Zz], [0-9], "-", "_" or "."]
        </mat-error>
        </mat-form-field>



        <mat-form-field>
        <mat-label>{{ 'preference.users.dialog.email' | translate }}</mat-label>
        <input matInput
            autocomplete="off"
            [formControl]="email"
            required />
        <mat-error *ngIf="email?.invalid">{{
            getErrorMessage()
            }}</mat-error>
        </mat-form-field>


        <mat-form-field>
        <mat-label>{{ 'preference.users.dialog.department' | translate }}</mat-label>
        <input matInput
            autocomplete="off"
            [formControl]="department"
            required />
        <mat-error *ngIf="department?.errors?.required">{{'validators.required' | translate }}</mat-error>
        <mat-error *ngIf="department?.errors?.minlength">
            {{ department?.errors?.minlength?.requiredLength }} Characters
            min
        </mat-error>
        <mat-error *ngIf="department?.errors?.maxlength">
            {{ department?.errors?.maxlength?.requiredLength }} Characters
            max
        </mat-error>
        <mat-error *ngIf="department?.errors?.pattern && !department?.errors?.minlength">
            {{'validators.pattern' | translate }} [aA-Zz], [0-9], "-", "_" , "." or empty space]
        </mat-error>
        </mat-form-field>

    </div>


<div style="display: grid; grid-template-columns: repeat(4, 24%); width: calc(100% - 10px); grid-gap: 10px; ">
    <mat-form-field *ngIf="username">
    <mat-label>{{ 'preference.users.dialog.username' | translate }}</mat-label>
    <input matInput
        autocomplete="off"
        [formControl]="username"
        [disabled]="!isAdmin"
        required />

    <mat-error *ngIf="username?.errors?.required">{{'validators.required' | translate }}</mat-error>
    <mat-error *ngIf="username?.errors?.minlength">
        {{ username?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
    </mat-error>
    <mat-error *ngIf="username?.errors?.maxlength">
        {{ username?.errors?.maxlength?.requiredLength }} {{'validators.maxChars' | translate }}
    </mat-error>
    <mat-error *ngIf="username?.errors?.pattern && !username?.errors?.minlength">
        {{'validators.pattern' | translate }} [aA-Zz], [0-9], "-", "_" or "."
    </mat-error>
    <mat-error *ngIf="username?.errors?.userNameNotAvailable">
        Username not available
    </mat-error>
    </mat-form-field>

    <mat-form-field>
    <mat-label>{{ 'preference.users.dialog.group' | translate }}</mat-label>
    <mat-select [formControl]="usergroup" [disabled]="!isAdmin"
    (selectionChange)='usergroup.setValue($event.value)' required>
        <mat-option *ngFor="let item of groupList"  [value]='item'>
                {{item}}
        </mat-option>
    </mat-select>
    <mat-error *ngIf="usergroup?.errors?.required">{{'validators.required' | translate }}</mat-error>
    <mat-error *ngIf="usergroup?.errors?.minlength">
        {{ usergroup?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
    </mat-error>
    <mat-error *ngIf="usergroup?.errors?.maxlength">
        {{ usergroup?.errors?.maxlength?.requiredLength }} {{'validators.maxChars' | translate }}
    </mat-error>
    <mat-error *ngIf="usergroup?.errors?.pattern && !usergroup?.errors?.minlength">
        {{'validators.pattern' | translate }} [aA-Zz], [0-9], "-", "_" or "."]
    </mat-error>
    </mat-form-field>

    <mat-form-field>
    <input matInput
        autocomplete="new-password"
        [placeholder]="'preference.users.dialog.password' | translate"
        [type]="hidePass1 ? 'password' : 'text'"
        [formControl]="password"
        required />
    <mat-error *ngIf="data?.isNew && password?.errors?.required">The password {{'validators.required' | translate }}</mat-error>
    <mat-error *ngIf="password?.errors?.minlength">
        {{ password?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
    </mat-error>
    <mat-error *ngIf="password?.errors?.maxlength">
        {{ password?.errors?.maxlength?.requiredLength }} {{'validators.maxChars' | translate }}
    </mat-error>
    
    <mat-icon matSuffix
        style="cursor: pointer"
        (click)="hidePass1 = !hidePass1"
        [attr.aria-label]="'Hide password'"
        [attr.aria-pressed]="hidePass1"
        [matTooltip]="hidePass1 ? 'Show password' : 'Hide password'">
        {{ hidePass1 ? "visibility_off" : "visibility" }}
    </mat-icon>
    </mat-form-field>

    <mat-form-field>
    <input matInput
        autocomplete="new-password"
        [placeholder]="'preference.users.dialog.confirm' | translate"
        [type]="hidePass1 ? 'password' : 'text'"
        [formControl]="password2"
        required />
    <mat-error *ngIf="password?.value !== password2?.value">
        The password and its confirmation do not coincide
    </mat-error>
    <mat-error *ngIf="password2?.errors?.minlength">
        {{ password2?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
        min
    </mat-error>
    <mat-error *ngIf="password2?.errors?.maxlength">
        {{ password2?.errors?.maxlength?.requiredLength }} {{'validators.maxChars' | translate }}
    </mat-error>
    </mat-form-field>
</div>
<div class="personal-actions">
    <button mat-raised-button
        class="setting-btn-ok"
        (click)="onSubmit()"
        cdkFocusInitial>
        {{'LINK.buttons.save' | translate}}
    </button>
    </div>


</div>
         

        </mat-tab>
        
        
        <mat-tab [label]="'preference.users.dialog.statistics' | translate" *ngIf="hasStatistics">
            <div style="height: 1rem"></div>
            <div *ngIf='data?.data?.params?.last_login' class='stats-label'>
                {{ 'preference.users.dialog.lastLogin' | translate }}
            </div>
            <div class='stats-data'>
                {{lastLogin}}
            </div>
            <mat-divider *ngIf='data?.data?.params?.last_login && data?.data?.params?.timestamp_change_password'></mat-divider>
            <div *ngIf='data?.data?.params?.timestamp_change_password' class='stats-label'>
                {{ 'preference.users.dialog.lastPassowrd' | translate }}
            </div>
            <div class='stats-data'>
                {{lastPasswordChange}}
            </div>
        </mat-tab>
   
        
    </mat-tab-group>




    </div>
</div>
